<template>
	<div class="device-list">
		<div>
			<label>{{$t('route.Device')}}</label>
			<div></div>
			<button><img /><label>{{$t('route.Device_List')}}</label></button>
		</div>

		<div>
			<div>
				<div>
					<label>{{$t('route.Startup_situation')}}</label>
					<label>{{time1}}</label>
					<button @click="refresh(0)"></button>
				</div>
				<div>
					<div v-if="chartShow" class="echart" id="echart-1"></div>
				</div>
			</div>

			<div>
				<div>
					<label>{{$t('route.Abnormal_device')}}</label>
					<label>{{time2}}</label>
					<button @click="refresh(1)"></button>
				</div>
				<div>
					<div v-if="chartShow" class="echart" id="echart-2"></div>
				</div>
			</div>
			<div>
				<div>
					<label>{{$t('route.Attribution')}}</label>
					<label>{{time3}}</label>
					<button @click="refresh(2)"></button>
				</div>
				<div>
					<div v-if="chartShow" id="echart-3" class="echart"></div>
				</div>
			</div>

			<div>
				<div>
					<label>{{$t('route.Attribution')}}</label>
					<label>{{time3}}</label>
					<button @click="refresh(2)"></button>
				</div>
				<div>
					<div v-if="chartShow" id="echart-3" class="echart"></div>
				</div>
			</div>


		</div>

		<div>

		</div>
	</div>
</template>

<script>
	import http from "../../js/http/http.js";
	import api from "../../js/http/api.js";
	import CommonUtils from "../../js/common/common-utils.js";
	import Constant from '../../js/common/constant.js'
	import * as echarts from 'echarts';
	import i18n from '../../i18n/index';
	export default {
		data() {
			return {
				time1: new Date().format('yyyy-MM-dd hh:mm:ss'),
				time2: new Date().format('yyyy-MM-dd hh:mm:ss'),
				time3: new Date().format('yyyy-MM-dd hh:mm:ss'),
			};
		},
		methods: {
			refresh() {


			},
			initEchart1(data) {
				var chartDiv = document.getElementById("echart-1");
				if (!chartDiv) return;
				var myChart = echarts.init(chartDiv);
				var option = CommonUtils.initPieOption(null, i18n.global.t('route.Startup_situation'), data, ['#66FF33', '#999999'])
				myChart.setOption(option);
			},
			initEchart2(data) {
				var chartDiv = document.getElementById("echart-2");
				if (!chartDiv) return;
				var myChart = echarts.init(chartDiv);
				var option = CommonUtils.initPieOption(null, i18n.global.t('route.Startup_sAbnormal_alarmituation'), data, ['#66FF33', '#FF0000'])
				myChart.setOption(option);
			},
			initEchart3(data) {
				var chartDiv = document.getElementById("echart-3");
				if (!chartDiv) return;
				var myChart = echarts.init(chartDiv);
				var option = CommonUtils.initPieOption(null, i18n.global.t('route.Attribution'), data, ['#fac858', '#fc8452', '#009966'])
				myChart.setOption(option);
			},
		},

		created() {

		},
	};
</script>
<style lang="scss" scoped>
	.device-list {
		color: #444444;
		font-size: 18px;
		padding-right: 20px;
		height: calc(100vh - 100px);
		// overflow: scroll;
		scrollbar-width: none;
		/* firefox */
		-ms-overflow-style: none;
		/* IE 10+ */
		overflow-x: hidden;
		overflow-y: auto;

		>div:nth-of-type(1) {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 20px;
			background-color: #ffffff;
			padding: 20px;
			border-radius: 5px;

			>label:nth-of-type(1) {
				font-weight: 600;
			}

			>div:nth-of-type(1) {
				width: 1px;
				background-color: #cccccc;
				height: 15px;
				margin: 0px 20px;
			}

			>button:nth-of-type(1) {
				background-image: url(../../assets/img/customer-1.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding: 5px 10px;
				border: 0px;
				display: flex;
				color: #ffffff;
				flex-direction: row;
				align-items: center;
				font-weight: 800;

				>img {
					margin-right: 7px;
					width: 15px;
					height: 15px;
					content: url(../../assets/img/customer-2.png);
				}
			}
		}

		>div:nth-of-type(2) {
			margin-top: 20px;
			display: flex;
			flex-direction: row;

			>div {
				margin: 0px 20px;
				flex: 1;
				background-color: #ffffff;
				padding: 20px;
				border-radius: 5px;

				>div:nth-of-type(1) {
					display: flex;
					flex-direction: row;
					align-items: center;

					>label:nth-of-type(1) {
						color: #000000;
						font-size: 18px;
					}

					>label:nth-of-type(2) {
						color: #999999;
						font-size: 17px;
						text-align: right;
						flex: 1;
					}

					>button:nth-of-type(1) {
						background-image: url(../../assets/img/refresh.png);
						background-repeat: no-repeat;
						background-size: 100% 100%;
						background-color: #FFFFFF;
						width: 20px;
						border: none;
						height: 20px;
						margin-left: 10px;
					}

				}

				>div:nth-of-type(2) {
					height: 155px;

					>div:nth-of-type(1) {
						>div:nth-of-type(1) {}
					}
				}
			}

			>div:nth-of-type(1) {
				margin-left: 0px;
			}

			>div:nth-of-type(4) {
				margin-right: 0px;
			}

		}

		.echart {
			height: 150px;
			width: 100%;
		}

	}
</style>
